<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(850)" :min-width="layout.modalMinWidth(800)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(900)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="80px">
            <el-form-item :style="layout.col1" label="标题" prop="name">
                <el-input v-model="state.model.name" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="所属程序" prop="programId">
                <el-select v-model="state.model.programId" style="width: 100%" filterable @change="onHandlerUserChange">
                    <el-option v-for="item in state.programList" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="处理人" prop="currentHandlerId">
                <el-select v-model="state.model.currentHandlerId" filterable style="width: 100%" @change="onHandlerUserChange">
                    <el-option v-for="item in state.userList" :key="item.id" :label="item.realName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="产品名称" prop="productName">
                <el-input v-model="state.model.productName" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="模块名称" prop="moduleName">
                <el-input v-model="state.model.moduleName" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="类型" prop="type">
                <el-select v-model="state.model.type" style="width: 100%">
                    <el-option :value="1" label="需求" />
                    <el-option :value="2" label="优化" />
                    <el-option :value="3" label="缺陷" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="紧急程度" prop="level">
                <el-select v-model="state.model.level" style="width: 100%">
                    <el-option :value="1" label="低" />
                    <el-option :value="2" label="中" />
                    <el-option :value="3" label="高" />
                    <el-option :value="4" label="急" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col1" label="详细描述" prop="remark">
                <g-editor v-model="state.model.remark" :height="300" :params="{fileModule: 3}" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="视频" prop="videoUrl">
                <g-file-list-upload v-model="state.model.videoUrl" :max="1" :params="{fileModule: 10}" types=".mp4|.avi" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="开始时间" prop="startTime">
                <el-date-picker v-model="state.model.startTime" type="datetime" :min="0" format="YYYY-MM-DD HH:mm" style="width: 100%;" value-format="YYYY-MM-DDTHH:mm:ss" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="结束时间" prop="endTime">
                <el-date-picker v-model="state.model.endTime" type="datetime" :disabled-date="disabledEnd" :min="0" format="YYYY-MM-DD HH:mm" style="width: 100%;" value-format="YYYY-MM-DDTHH:mm:ss" />
            </el-form-item>

        </el-form>
        <div style="width: 100%;height: 200px"></div>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;



const Model = () => {
    return {
        id: null,
        code: 0,
        name: null,
        type: 1,
        state: 1,
        level: 2,
        remark: null,
        videoUrl: null,
        startTime: $dayjs().format("YYYY-MM-DDTHH:mm:ss"),
        endTime: null,
        currentHandlerId: null,
        currentHandlerName: null,
        createdUserName: null,
        programId: null,
        productName: null,
        moduleName: null
    }
}

// 校验规则
const rules = computed(() => {
    return {
        name: [{required: true, message: "请输入标题"}],
        // programId: [{required: true, message: "请设置所属程序"}],
        currentHandlerId: [{required: true, message: "请选择处理人"}],
        endTime: [{required: true, message: "请选择结束时间"}],
    }
})

// 自定义校验规则
const customRules = {
    // pid: (rule, value, callback) => {
    //     if (state.model.type > 0) {
    //         if (!value) return callback(new Error("请选择上级菜单"));
    //     }
    //     return true;
    // },
};

// 禁用截止时间
function disabledEnd(date) {
    if (!state.model.startTime) return false;
    return new Date(date).getTime() < new Date(state.model.startTime).getTime()
}

/**
 * 选中处理人
 */
function onHandlerUserChange(id) {
    const user = state.userList.find(item => item.id === id);
    if (user) {
        state.model.currentHandlerName = user.realName
    }
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    state.userList = [];
    api.GetUserList({}).then(({data}) => {
        state.userList = data || [];
    })
    api.GetProgramList({}).then(res => {
        state.programList = res.data || [];
    })
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {...state.model}
    body.programId = body.programId || 0
    const {success, data} = await api[state.model.id ? 'UpdateDebugInfo' : 'AddDebugInfo'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
